//路径工具
const path = require('path');
//导入打包 html 的插件 
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入 清理文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
//导入 css 提取插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入 css 压缩插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//这里必须要使用 commonJS 模块化规范
// webpack 是在 node 环境下运行的, 而 node 默认不支持 ES6 模块化规范
//ctrl + k   ctrl + 0
module.exports = {
    //入口
    entry: ['./src/js/app.js', './src/index.html'],
    //出口   值必须为『对象』
    output: {
        //path 设置输出的文件夹,  路径必须是『绝对路径』
        path: path.resolve(__dirname, '../build'), 
        //filename 设置输出文件
        filename: 'js/bundle.js',
        //设置资源 url 的路径前缀
        publicPath: '/'
    },
    //模式
    mode: 'production',
    //loader 配置
    module: {
        //规则
        rules: [
            //css loader 规则
            {
                test: /\.css$/,
                //使用
                use: [
                    MiniCssExtractPlugin.loader, 
                    'css-loader',      // 将 css 文件转化为 commonJS 模块
                    'postcss-loader'
                ]
            },
            // less loader规则
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    'css-loader',
                    'postcss-loader',
                    'less-loader'    // 将 less 资源转化为 css 资源
                ]
            },
            //eslint 代码质量检查
            {
                test: /\.js$/,                  //只检测js文件
                exclude: /node_modules/,        //排除node_modules文件夹
                enforce: "pre",                 //提前加载使用
                use: {                          
                    loader: "eslint-loader"		//使用eslint-loader解析
                }
            },
            //babel 语法转换
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: "babel-loader",
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
            },
            //背景图片
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,               		// 8kb以下的图片会 base64 处理
                        outputPath: 'images',           // 文件本地输出路径
                        name: '[hash:12].[ext]',         // 修改文件名称和后缀 
                    }
                }
            },
            //html 文件的处理
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //其他文件配置
            {
                test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,  // 处理字体文件
                loader: 'file-loader',
                options: {
                  outputPath: 'fonts',
                  name: '[hash:8].[ext]'
                }
            }
        ]
    },
    //插件
    plugins:[
        //2. 配置插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 设置要编译的 HTML 源文件路径
        }),
        //清理目录
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({					// 3. 配置插件
            filename: "css/[hash:8].css",
        }),
        //2. 配置插件
        new OptimizeCssAssetsPlugin()
    ],
    //devtool
    devtool: 'cheap-module-eval-source-map'
}

